<template>
  <div>
    <Phead />
    <Pmsg />
      <div class="personal-content w clearfix">
         <Pmy />

          <!-- 个人中心 > 身份认证 -->
            <div class="right identity">
                <h3 class="stamp">修改密码</h3>
                <div class="editpassword">
                    <form action="" id="form3">
                        <p><img src="@/assets/img/a.png" alt="">您的账号目前绑定的手机号：<span>{{number}}</span>，请点击 获取验证码进行密码修改。
                        </p>

                        <input v-model="passWord" type="password" placeholder="请输入新密码" class="password" name="psword2">
                        <div class="yamborder">
                        <input v-model="mobileCode" type="text" placeholder="验证码" class="yam" name="yam">
                    

                        <a @click.prevent="getVerifyCode" v-show="!computedTime">获取验证码
                        </a>
                        <a  @click.prevent v-show="computedTime">已发送({{computedTime}}s)</a> 

                        </div>
                        
                        <button type="button" @click="reset" >重置密码</button>
                    </form>

                </div>
            </div>

        </div>
      <Pfoot />
      <!-- 表单验证 -->
      <Pdailog :is-show="formAlertShow" @on-close="formAlertClose" >
           <div slot="main">{{formAlertText}}</div>
      </Pdailog>

  </div>


</template>

<!-- <template>
<div class="wrap w-login w-change detail">
    <header>
        <img onclick="javascript :history.back(-1);" src="@/assets/img/l_b.png" alt="" />
        修改密码
    </header>
    <form action="">
        <p>您的账号目前绑定的手机号：{{number}}，请点击获取验证码进行密码修改。</p>
        <div class="group clearfix">
            <input v-model="passWord" id="password" :type="is_psd" placeholder="请输入密码(不小于6位,英文字母,数字)" />
            <img class="eye" :src="img" alt="" @click="showPsd"/>
        </div>
        <div class="group clearfix">
            <input type="text" placeholder="请输入验证码" v-model="mobileCode"/>
            <span @click.prevent="getVerifyCode" v-show="!computedTime">获取验证码
            </span>
            <span  @click.prevent v-show="computedTime">已发送({{computedTime}}s)</span> 
        </div>
        <button class="disabled" id="changePwd" v-if="disabled">重置密码</button>
        <button type="button" id="changePwd" v-else @click="reset" >重置密码</button>

    </form>

</div>  

</template> -->
<script>

import Phead from '@/components/Phead.vue'
import Pfoot from '@/components/Pfoot.vue'
import Pmy from '@/components/Pmy.vue'
import Pmsg from '@/components/Pmsg.vue'
import Pdailog from '@/components/Pdailog.vue'

export default {
  data(){
    return{

      number: '133********',  //当前手机号
      is_psd: 'password',  //密码框状态

        mobileCode: null, //短信验证码
        computedTime:0,// 倒计时
        userInfo: null, //获取到的用户信息
        passWord: null, //密码


      disabled: true,  //重置按钮是否禁用

      //form 错误提示
        formAlertShow:false,
        formAlertText:'提示',
      
     }
  },  
  async created(){
       let user = await this.$axios.get('user/getUserByToken')
        if(user.code == 200){
           this.number = user.data.user_phone 
        }
    },
  
  mounted(){
            
  },
  computed: {
  },
  
  components: {
    Phead,
    Pfoot,
    Pmy,
    Pmsg,
    Pdailog
  },

  methods:{
    //重置按钮点击
    reset () {  
      if (new RegExp('^[a-zA-Z0-9]{6,18}$').test(this.passWord) != true) {
          this.formAlertShow =true
          this.formAlertText =`密码格式不正确`
         

      }else if(new RegExp('^[0-9]{4}$').test(this.mobileCode) != true){
          this.formAlertShow =true
          this.formAlertText =`验证码格式不正确`
        

      }else{
           this.$axios.post('/login/editPass',{
                   user_pass:this.passWord,
                   code:this.mobileCode,
                }
            ).then((res)=>{
                if(res.code  == 200){
                    this.disabled = false;
                    this.$router.push({path:'/my/bidlist'})
                 }else{
                    this.formAlertShow = true
                    this.formAlertText = res.msg
                  
                 }
            })

      }       
    },
    //发送短信验证码
    async getVerifyCode(){
        if (new RegExp('^[a-zA-Z0-9]{6,18}$').test(this.passWord) == true) {
            this.computedTime = 60;
            this.timer = setInterval(() => {
                this.computedTime --;
                if (this.computedTime == 0) {
                    clearInterval(this.timer)
                }
            }, 1000)
            //发送短信验证码
            await this.$axios.get('/login/sendSmsCode',{
                params:{
                   phone:this.number  
                }
            }).then((res)=>{
                if(res.code  == 200){
                    this.disabled = false;
                 }else{
                    this.formAlertShow = true
                    this.formAlertText = res.msg
                 }
            })
        
           }else{
            this.formAlertShow = true
            this.formAlertText = '密码格式不正确'
            
            return
            
        }
    },
     //表单错误提示弹框
    formAlertClose(){
        this.formAlertShow = false;
    }, 
    

  }

}
 </script>
